import { List, WhiteSpace, Tag, ListView, Result, SearchBar, Icon } from 'antd-mobile';
import { Component } from 'react';
import ReactDOM from 'react-dom';
import Link from 'umi/link';
import { emptyBase64Url } from '@/assets/base64Url'
import { connect } from 'dva';
import { mobileFilter } from '@/utils'
const { Item } = List
const { Brief } = Item
@connect(({ manager, loading }) => {
  return {
    manager,
  }
})
class Worker extends Component {
  constructor(props) {
    super(props)
    this.onChange = this.onChange.bind(this)
    this.renderRow = this.renderRow.bind(this)
    this.onEndReached = this.onEndReached.bind(this)
    this.searchHandle = this.searchHandle.bind(this)
    this.renderFooter = this.renderFooter.bind(this)
    this.onSearchCancel = this.onSearchCancel.bind(this)
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      dataSource,
      dataBlobs: {},
      sectionIDs: [],
      dataItems: [],
      rowIDs: [],
      isLoading: true,
      params: {
        name: '',
        pageIndex: 1,
        pageLimit: 10
      }
    }
  }
  searchHandle(val) {
    this.getWorkerList({name: val, pageIndex: 1})
  }
  onSearchCancel() {
    this.setState({
      params: {
        ...this.state.params,
        name: ''
      }
    }, () => {
      this.getWorkerList({ pageIndex: 1})
    })
  }
  onChange(value) {
    this.setState({
      params: {
        ...this.state.params,
        name: value
      }
    })
  }
  renderRow(rowData, sectionID, rowID) {
    return <Item
      extra={
        <div>
          <Link to={`/manager/createRecord?id=${rowData.id}`}>
            <Tag style={{marginRight: '5px'}}>记录</Tag>
          </Link>
          <Link to={`/manager/workerDetail?id=${rowData.id}`}>
            <Tag style={{marginRight: '5px'}}>详情</Tag>
          </Link>
        </div>
      }
    >
      <div style={{display: 'flex', alignItems: 'center'}}>
        <span style={{marginRight: '15px'}}>{rowData.name}</span>
        {rowData.recorded ? <Icon type='check-circle' size="xxs" color="#52c41a" /> : null}
      </div>
      <Brief>
        <a href={`tel:${rowData.phone}`} >{mobileFilter(rowData.phone)}</a>
      </Brief>
    </Item>
  }
  getWorkerList(params = {}) {
    const { dispatch } = this.props
    this.setState({
      isLoading: true
    },() => {
      dispatch({
        type: 'manager/getWorkerList',
        payload: {...this.state.params, ...params}
      }).then(res => {
        let dataSource = [];
        let dataItems = [...this.state.dataItems]
        if(res.data.pageIndex === 1) {
          dataItems = res.data.items || []
          dataSource = this.state.dataSource.cloneWithRows(dataItems)
        } else {
          dataItems = [...dataItems, ...res.data.items]
          dataSource = this.state.dataSource.cloneWithRows(dataItems)
        }
        this.setState({
          dataItems,
          dataSource,
          isLoading: false,
          isMore: res.data.pageIndex !== res.data.pageNum
        })
      }).catch(() => {
        this.setState({
          isLoading: false
        })
      })
    })
  }
  onEndReached(e) {
    if(this.state.isMore && !this.state.isLoading) {
      this.getWorkerList({pageIndex: ++this.state.params.pageIndex})
    }
  }
  componentDidMount() {
    this.getWorkerList()
    const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
    this.setState({
      height: hei - 43,
    })
  }
  renderFooter() {
    if(this.state.isLoading) {
      return '加载中'
    }else {
      if( this.state.dataItems && !this.state.dataItems.length ) {
        return <Result
          message="暂无数据"
          imgUrl={emptyBase64Url}
        />
      }
      if(!this.state.isMore) {
        return '没有更多了'
      }
    }
  }
  render() {
    return (
      <div>
        <SearchBar value={this.state.params.name} placeholder="请输入姓名" onSubmit={this.searchHandle} onCancel={this.onSearchCancel} onChange={this.onChange} />
        <List>
          <Link to={`/manager/user/create`}><Item arrow="horizontal">添加员工</Item></Link>
        </List>
        <WhiteSpace />
        <List>
          <ListView
            ref={el => this.lv = el}
            dataSource={this.state.dataSource}
            onEndReached={this.onEndReached}
            renderRow={this.renderRow}
            style={{height: this.state.height}}
            renderFooter={this.renderFooter}
          />
        </List>
      </div>
    )
  }
}
export default Worker